<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>基础JAVAscript</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" href="http://pengjianquan.pro.bluej.cn/resume/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../../index.css"/>
	</head>

	<BODY>
		<pre><h1>基础JAVAscript</a></h1></pre>
		<div id="div1" class="box box-re">
			1、算术练习<br><br>
			<div class="box box-re form-inline">
				例1：求和<br>
				<input type="text" class="form-control" /> 加 <input type="text" class="form-control" /> <button class="btn btn-info">求和</button>
			</div>
			<div class="box box-re form-inline">
				例2：求差<br>
				<input type="text" class="form-control" /> 减 <input type="text" class="form-control" /> <button class="btn btn-info">求差</button>
			</div>
			<div class="box box-re form-inline">
				例3：求积<br>
				<input type="text" class="form-control" /> 乘 <input type="text" class="form-control" /> <button class="btn btn-info">求积</button>
			</div>
			<div class="box box-re form-inline">
				例4：求商<br>
				<input type="text" class="form-control" /> 除 <input type="text" class="form-control" /> <button class="btn btn-info">求商</button>
			</div>
			<div class="box box-re form-inline">
				例5：求模<br>
				<input type="text" class="form-control" /> 模 <input type="text" class="form-control" /> <button class="btn btn-info">求模</button>
			</div>
		</div>
		<div id="div2" class="box box-re">
			2、取模应用于隔行换色<br><br> 虽然现在需要实现这个应用只要通过CSS3的选择器进行偶数选择即可，但学习的进程还是要遵循的。
			<br> 实现不管有多少个li，偶数li和奇数li使用不同背景颜色。分析：获取所有li，做一个li的for循环，再进行判断当前这个li模上2等于0的时候执行变深蓝色，不等于0的时候执行变浅蓝色。
			<button class="btn btn-info">执行变色</button><br><br>
			<ul class="list-group">
				<li class="list-group-item">隔行变色</li>
				<li class="list-group-item">隔行变色</li>
				<li class="list-group-item">隔行变色</li>
				<li class="list-group-item">隔行变色</li>
				<li class="list-group-item">隔行变色</li>
			</ul>
		</div>
		<div id="div3" class="box box-re">
			3、求商取模应用于秒转时间<br><br> 分析：不管输入框获取到的数字是多少，都执行除60取分钟，除600取小时，最后取模为秒数。通过parseInt取整数。
			<br><br>
			<div class="box box-re form-inline">
				<input type="text" class="form-control" placeholder="单位(秒)" /> <button class="btn btn-info">秒转时间</button><br>
			</div>
		</div>

		<div id="div4" class="box box-re">
			4、判断是否为两位数<br><br> 分析：输入数字大于9且小于100为两位数。
			<br><br>
			<div class="box box-re form-inline">
				<input type="text" class="form-control" placeholder="请输入数字" /> <button class="btn btn-info">判断</button><br>
			</div>
		</div>

		<div id="Record" class="box box-re red">
			记录<br>
			<p><b>算术：</b>+加、-减、*乘、/除、%取模（求余数、求模）就是整除之后出来的余数。</p>
			<p><b>赋值：</b>=、+=（i+=1和i=i+1和i++是一个意思，都是加1，但是如果想一次加3，就不能用i++了，只能i=i+3或i+=3）、-=（减等）、*=（乘等）、/=（除等）、%=（模等）</p>
			<p><b>关系：</b>
				<、>、
					<=、>=、==（双等-先转换再比较）、===（三等-不转换直接比）、!=（不等）、!==
						<（不等等）</p>
							<p><b>逻辑：</b>&&与（并且）、||或、!否（调换真假）</p>
							<p><b>运算符优先级：</b>括号</p>
		</div>
		
		<script>
			//算数练习

			//求和
			(function () {
				var div1 = document.getElementById('div1');
				var div_goal = div1.getElementsByTagName('div')[0];
				var input_1 = div_goal.getElementsByTagName('input')[0];
				var input_2 = div_goal.getElementsByTagName('input')[1];	
				var btn = div_goal.querySelector('button');
				btn.addEventListener('click',function (){
					var input_1_val = parseInt(input_1.value);
					var input_2_val = parseInt(input_2.value);
					if ( input_1.value == '' || input_2.value == '') return false;
					if ( isNaN(input_1.value) == true || isNaN(input_2.value) == true ){
						input_1.value = '';
						input_2.value = '';
					}else{
						alert(input_1_val + input_2_val);
					}
				});
			})();

			//求差
			(function () {
				var div1 = document.getElementById('div1');
				var div_goal = div1.getElementsByTagName('div')[1];
				var input_1 = div_goal.getElementsByTagName('input')[0];
				var input_2 = div_goal.getElementsByTagName('input')[1];	
				var btn = div_goal.querySelector('button');
				btn.addEventListener('click',function (){
					var input_1_val = parseInt(input_1.value);
					var input_2_val = parseInt(input_2.value);
					if ( input_1.value == '' || input_2.value == '') return false;
					if ( isNaN(input_1.value) == true || isNaN(input_2.value) == true ){
						input_1.value = '';
						input_2.value = '';
					}else{
						alert(input_1_val - input_2_val);
					}
				});
			})();

			//求积
			(function () {
				var div1 = document.getElementById('div1');
				var div_goal = div1.getElementsByTagName('div')[2];
				var input_1 = div_goal.getElementsByTagName('input')[0];
				var input_2 = div_goal.getElementsByTagName('input')[1];	
				var btn = div_goal.querySelector('button');
				btn.addEventListener('click',function (){
					var input_1_val = parseInt(input_1.value);
					var input_2_val = parseInt(input_2.value);
					if ( input_1.value == '' || input_2.value == '') return false;
					if ( isNaN(input_1.value) == true || isNaN(input_2.value) == true ){
						input_1.value = '';
						input_2.value = '';
					}else{
						alert(input_1_val * input_2_val);
					}
				});
			})();

			//求商
			(function () {
				var div1 = document.getElementById('div1');
				var div_goal = div1.getElementsByTagName('div')[3];
				var input_1 = div_goal.getElementsByTagName('input')[0];
				var input_2 = div_goal.getElementsByTagName('input')[1];	
				var btn = div_goal.querySelector('button');
				btn.addEventListener('click',function (){
					var input_1_val = parseInt(input_1.value);
					var input_2_val = parseInt(input_2.value);
					if ( input_1.value == '' || input_2.value == '') return false;
					if ( isNaN(input_1.value) == true || isNaN(input_2.value) == true ){
						input_1.value = '';
						input_2.value = '';
					}else{
						if( input_2_val == 0 ){
							input_1.value = '';
							input_2.value = '';
						}else{
							alert(input_1_val / input_2_val);
						}
					}
				});
			})();


			//求模
			(function () {
				var div1 = document.getElementById('div1');
				var div_goal = div1.getElementsByTagName('div')[4];
				var input_1 = div_goal.getElementsByTagName('input')[0];
				var input_2 = div_goal.getElementsByTagName('input')[1];	
				var btn = div_goal.querySelector('button');
				btn.addEventListener('click',function (){
					var input_1_val = parseInt(input_1.value);
					var input_2_val = parseInt(input_2.value);
					if ( input_1.value == '' || input_2.value == '') return false;
					if ( isNaN(input_1.value) == true || isNaN(input_2.value) == true ){
						input_1.value = '';
						input_2.value = '';
					}else{
					
						alert(input_1_val % input_2_val);
						
					}
				});
			})();


			//隔行换色

			(function (){
				var div_2 = document.getElementById('div2');
				var btn = div_2.querySelector('button');
				var li_group = div_2.querySelector('.list-group');
				var lis = li_group.children;
	
				btn.addEventListener('click', function () {
					for( var i = 0; i < lis.length; i++ ) {
						if ( i % 2 == 0){
							lis[i].style.background = 'blue';
						}else{
							lis[i].style.background = 'skyblue';
						}
					}
				});
			})();

			// 求商取模应用于秒转时间
			(function () {
				var div_3 = document.getElementById('div3');
				var div_goal = div_3.querySelector('.box');
				var input = div_goal.querySelector('input');
				var btn = div_goal.querySelector('button');
				var hour,min,sec;
				btn.addEventListener('click',function(){
					var input_val = parseInt(input.value);
					if (input.value == '') return false;
					if ( isNaN(input.value) == false){
						hour = parseInt(input_val/600);
						min = parseInt(input_val%600/60);
						sec = parseInt(input_val%600%60);
						alert(hour + '小时' + ',' + min + '分钟' + sec + '秒');
					}else{
						input.value = '';
					}
				});
			})();


			//判断是否为两位数
			(function () {
				var div_4 = document.getElementById('div4');
				var div_goal = div_4.querySelector('.box');
				var input = div_goal.querySelector('input');
				var btn = div_goal.querySelector('button');

				btn.addEventListener('click',function (){
					var input_val = parseInt(input.value);
					if ( input.value == '' ||  isNaN(input_val)== true ) {
							input.value = '';
							return false;
					}
					if ( 9 < input_val && input_val < 100 ){
						alert('两位数');
					} else {
						alert('不是两位数');
					}
				});
			})();
		</script>
	</BODY>

</HTML>